<script setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const list = reactive([
  { name: "态势总览", path: "/situationOverview", isActive: false },
  { name: "重点场所", path: "", isActive: false },
  { name: "城乡社区", path: "/urbanRuralCommunity", isActive: false },
  { name: "场所码管理", path: "/siteCodeManage", isActive: false },
  { name: "核酸检测", path: "/naTest", isActive: false },
  { name: "网格化管理", path: "", isActive: false },
  { name: "返乡报备", path: "/returnTown", isActive: false },
  { name: "人口信息", path: "/PopulationOverview", isActive: false },
  { name: "一键直查", path: "/OneKeySearchView", isActive: false },
]);
function toClickChildPage(current) {
   /* if (current.path) {
        //通过路由跳转导致视频无法播放，现在改为打开新窗口^_^
        //window.open('/#' + current.path)
        //window.close()
    }*/

    //return;
  for (let item of list) {
    if (item.name === current.name) {
      item.isActive = true;
      router.push({ path: current.path });
    } else {
      item.isActive = false;
    }
  }
}
</script>

<template>
  <div class="header">
    <div class="title">
      <img src="@/assets/header.png" />
    </div>
    <div class="clickedItems">
      <div
        :class="{ item, clicked: item.isActive }"
        v-for="(item, index) in list"
        :key="index"
        @click="toClickChildPage(item)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.header {
  height: 12vh;
  background-position: 0 -34px;
  background-image: url("../assets/top.png");
  background-repeat: no-repeat;
  background-size: 100% 130%;
  .title {
    height: 5.7vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 30px;
    font-weight: bolder;
    letter-spacing: 5px;
  }
  .clickedItems {
    height: 7vh;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

    .item {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: 170px;
      height: 4.5vh;
      cursor: pointer;
      color: #fff;
      font-size: 23px;
      background-image: url("../assets/7632.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}
.clicked {
  background-image: url("../assets/7631.png") !important;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>
